@import 'common.sass'

#article-container
    width: vw(750)
    height: auto

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .english
            font-size: vw(18)
            color: $content_color

        .chinese
            font-size: vw(28)
            display: flex
            align-items: center
            color: $title_color

            .decoration
                width: vw(52)
                height: vw(15)
                background-image: url("images/index/title-decoration.png")
                background-size: vw(52) vw(15)
                background-position: center center

            .text
                margin-left: vw(20)
                margin-right: vw(20)

    .swiper-wrapper
        width: vw(750)
        height: vw(650)

        .swiper-slide
            width: vw(750)
            height: vw(450)
            display: flex
            justify-content: center

            .content-box
                width: vw(700)
                height: auto

                .element
                    width: auto
                    height: vw(200)
                    display: flex
                    justify-content: space-between
                    align-items: center

                    .img
                        width: vw(200)
                        height: vw(200)

                    .article-box
                        width: vw(480)
                        height: vw(200)
                        display: flex
                        flex-direction: column
                        justify-content: space-between

                        .date-and-view
                            width: auto
                            height: auto
                            display: flex
                            justify-content: space-between
                            font-size: vw(18)
                            color: $hint_color

                            .date
                                width: auto

                            .view
                                width: auto
                                height: auto
                                display: flex
                                justify-content: space-between
                                align-items: center

                                .decoration
                                    width: vw(30)
                                    height: vw(17)
                                    background-image: url("images/index/view-decoration.png")
                                    background-repeat: no-repeat
                                    background-size: vw(30) vw(17)

                                .view-times
                                    margin-left: vw(12)

                        .title
                            width: auto
                            height: auto
                            line-height: auto
                            display: flex
                            justify-content: flex-start
                            font-size: vw(26)
                            color: $title_color

                        .content-box
                            width: auto
                            height: auto
                            text-indent: 2em
                            font-size: vw(22)
                            line-height: vw(44)
                            color: $content_color
                            word-break: all

.article-pagination-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .article-pagination

        .swiper-pagination-bullet
            width: vw(12)
            height: vw(12)
            border-radius: vw(12)
            margin: 0 vw(4)
            background-color: $brand_main_color

.article-pagination-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .swiper-pagination

        .swiper-pagination-bullet
            width: vw(12)
            height: vw(12)
            border-radius: vw(12)
            margin: 0 vw(4)
            background-color: $brand_main_color

.article-button-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .button-box
        width: auto
        height: vw(48)
        display: flex

        .button
            width: vw(140)
            height: vw(44)
            line-height: vw(44)
            border: vw(2) solid gray
            text-align: center
            font-size: vw(24)